//嵌套路由小案例 布局页面一级路由
const { BrowserRouter, Router, HashRouter, Route, NavLink, Link, IndexRoute, useRouteMatch, Redirect, Switch}  =  ReactRouterDOM

/**
 * 后端动态路由
 * @returns {JSX.Element}
 * @constructor
 */
function AppRouter(){
    let routeConfig = [
        {path:'/home',title:'博客首页',exact:true,component:LayoutContainer},
        {path:'/video',title:'视频教程',exact:true,component:Video},
        {path:'/workplace',title:'职场技能',exact:true,component:Workplace},
    ]
    return(
        <HashRouter>
            <div className='main'>
                {/* 左侧导航部分 */}
                <div className='left-nav'>
                    <h3>一级导航</h3>
                    <ul className="menu">
                        {/* 渲染动态路由 */}
                        {
                            routeConfig.map((item,index)=>{
                                return (
                                    <li className="menu-item" key={index} >
                                        <NavLink activeClassName="menu-active" activeOnlyWhenExact={true} to={item.path}>{item.title}</NavLink>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                {/* 右侧显示部分 */}
                <div className='right-main'>
                    <Switch>
                        {
                            routeConfig.map((item,index)=>{
                                return (
                                    <Route  key={index} path={item.path} component={item.component}></Route>
                                )
                            })
                        }
                        <Route component={ () => <div className="no-found">404页面</div> }></Route>
                    </Switch>
                </div>
            </div>
        </HashRouter>
    )
}

/**
 * 首页
 * @returns {JSX.Element}
 * @constructor
 */
function LayoutContainer() {
    return(
        <div className="home">
            <div className="top-nav">
                <ul className="horizontal-nav">
                    <li className="nav-tab"><NavLink to='/home/dashboard/' activeClassName="nav-active" onlyActiveOnIndex={true}>仪表盘</NavLink></li>
                    <li className="nav-tab"><NavLink to='/home/home/' activeClassName="nav-active">主页</NavLink></li>
                    <li className="nav-tab"><NavLink to='/home/message/' activeClassName="nav-active">消息</NavLink></li>
                </ul>
            </div>
            <div className='home-content'>
                <h3>仪表盘</h3>
                <div className="home-section">
                    <Route exact path='/home/dashboard/' component={Dashboard} />
                    <Route exact path='/home/home/' component={Home} />
                    <Route exact path='/home/message/' component={Message} />
                </div>
            </div>
        </div>
    )
}

function Dashboard() {
    return(
        <div className="dashboard-container">仪表盘</div>
    )
}
function Home() {
    return(
        <div className="home-container">主页</div>
    )
}
function Message() {
    return(
        <div className="message-container">消息页面</div>
    )
}

function Video() {
    return(
        <div className="video">
            <div className='top-nav'>
                <ul className="horizontal-nav">
                    <li className="nav-tab"><NavLink to='/video/react/' activeClassName="nav-active" activeOnlyWhenExact={true} onlyActiveOnIndex={true}>React教程</NavLink></li>
                    <li className="nav-tab"><NavLink to='/video/flutter/' activeClassName="nav-active" onlyActiveOnIndex={true}>Flutter教程</NavLink></li>
                    <li className="nav-tab"><NavLink to='/video/vue/' activeClassName="nav-active" onlyActiveOnIndex={true}>Vue教程</NavLink></li>
                </ul>
            </div>
            <div className='video-Content'>
                <h3>视频教程</h3>
                <div className="video-section">
                    <Route exact path='/video/react/' component={ReactPage} />
                    <Route exact path='/video/flutter/' component={Flutter} />
                    <Route exact path='/video/vue/' component={Vue} />
                </div>
            </div>
        </div>
    )
}

function ReactPage() {
    return(
        <div className="react-guide">React教程页面</div>
    )
}

function Flutter() {
    return(
        <div className="flutter-guide">Flutter教程页面</div>
    )
}

function Vue() {
    return(
        <div className="vue-guide">vue教程页面</div>
    )
}

/**
 * 工作空间
 * @returns {JSX.Element}
 * @constructor
 */
function Workplace() {
    return(
        <HashRouter>
            <div className="workplace">
                <div className="topNav">
                    <ul className="nav horizontal-nav">
                        <ActiveTab activeOnlyWhenExact={true} to="/workplace/Money" label="程序员加薪秘籍"/>
                        <ActiveTab to="/workplace/Getup" label="程序员早起攻略"/>
                    </ul>
                </div>
                <div className="videoContent">
                    <div className="title"><h3>职场软技能</h3></div>
                    <Route exact path="/workplace/Money">
                        <Money/>
                    </Route>
                    <Route path="/workplace/Getup">
                        <Getup/>
                    </Route>
                </div>
            </div>
        </HashRouter>
    )
}

/**
 * 自定义Link
 * @param label
 * @param to
 * @param activeOnlyWhenExact
 * @returns {JSX.Element}
 */
function ActiveTab({label,to,activeOnlyWhenExact}) {
    let match = useRouteMatch(to)
    return(
        <li className="nav-tab"><Link className={match? "nav-active":""} to={to}>{label}</Link></li>
    )
}
function Money() {
    return(
        <div className="moeny-guide">程序员加薪秘籍</div>
    )
}

function Getup() {
    return(
        <div className="Getup-guide">程序员从入门到入院</div>
    )
}
